<template>
  <el-dialog
    :visible.sync="showDialog"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="800px"
    :title="title"
    @close="closeDialog"
  >
    <el-form ref="qdForm" :model="qdForm" label-width="100px" :rules="rules" label-suffix="：" @submit.native.prevent>
      <el-form-item label="用户信息" prop="name">
        <MemberSearch
          ref="memberSearchRefa"
          @clear="MemberClear"
          @select="MemberSelect"
        />
      </el-form-item>
      <div v-if="TicketAbleResult" class="verificat_info_wrap">
        <h2>已购套餐/课程明细：</h2>
        <div class="verificat_info-main">
          <div class="left">
            <div v-if="TicketAbleList.length == 0" class="default_noticket">
              <img src="@/assets/images/default_noticket.png" alt="">
            </div>
            <template v-if="TicketAbleList.length > 0">
              <div
                v-for="item in TicketAbleList"
                :key="item.objId"
                class="info_item"
                :class="{ active: item.objId === activeTicketItem.objId }"
                @click="ticketItemClick(item)"
              >
                <h2>{{ item.objIdName }}<span class="primaryColor">（{{
                  item.objType == 1?'课程': '套餐'
                }}</span>）</h2>
                <div class="line">
                  <span
                    v-if="item.totalNum"
                    class="span4"
                  >使用情况：{{ item.remainNum + '/' + item.totalNum }}</span>
                </div>
                <div class="line">
                  <span
                    v-if="item.validityStartTime"
                    class="span6"
                  >有效期：<span class="primaryColor">{{
                    item.validityStartTime + "-" + item.validityEndTime
                  }}</span></span>
                </div>
              </div>
            </template>
          </div>
          <div v-if="verificatInfo.id" class="right">
            <div class="head_wrap">
              <el-image
                shape="circle"
                style="width: 40px; height: 40px; border-radius: 50%"
                fit="cover"
                class="flex-cc mr10"
                :src="
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic
                "
                :preview-src-list="[
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <div class="wrap">
                <div class="name">{{ verificatInfo.nickName }}</div>
                <div class="phone">{{ verificatInfo.phone }}</div>
              </div>
            </div>
            <div v-if="verificatInfo.realName" class="line">
              <span class="key">真实姓名：</span>
              {{ verificatInfo.realName }}
            </div>
            <div class="line">
              <span class="key">性别：</span>{{
                verificatInfo.sex === "1"
                  ? "男"
                  : verificatInfo.sex === "2"
                    ? "女"
                    : "保密"
              }}
            </div>
            <div v-if="verificatInfo.identityNumber" class="line">
              <span class="key">身份证号：</span>{{ verificatInfo.identityNumber || "" }}
            </div>
            <div v-if="verificatInfo.number" class="line">
              <span class="key">会员卡号：</span>{{ verificatInfo.number }}
            </div>
            <div v-if="verificatInfo.rechargeMoney" class="line">
              <span class="key">充值余额：</span>{{ verificatInfo.rechargeMoney }}
            </div>
            <div v-if="verificatInfo.giveMoney" class="line">
              <span class="key">赠送余额：</span>{{ verificatInfo.giveMoney }}
            </div>
            <div v-if="verificatInfo.integral" class="line">
              <span class="key">积分余额：</span>{{ verificatInfo.integral }}
            </div>
          </div>
        </div>
      </div>
      <el-form-item v-if="activeTicketItem.objId" label="伴游卡" prop="escortId">
        <el-select
          v-model="qdForm.escortId"
          style="width: 100%;"
          placeholder="请选择伴游卡"
        >
          <el-option
            v-for="item in bykList"
            :key="item.escortId"
            :label="item.escortName"
            :value="item.escortId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="购卡会员" prop="escortMemberId">
        <MemberSearch
          ref="memberSearchRef"
          @clear="tgMemberClear"
          @select="tgMemberSelect"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="qdForm.remark"
          maxlength="200"
          style="width: 100%;"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="verificat_footer">
      <div />
      <div>
        <el-button @click="closeDialog">取消</el-button>
        <el-button
          type="primary"
          :loading="qdLoading"
          @click="qdbtn"
        >确认购买</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  mainCardList,
  vendibilityList,
  escortBuy
} from '@/api'
import store from '@/store'
import MemberSearch from '@/components/MemberSearch'
export default {
  components: {
    MemberSearch
  },
  data() {
    return {
      title: '伴游卡售卖',
      modalDialog: store.getters.dialog,
      showDialog: false,
      loading: false,
      qdLoading: false,
      memberId: '',
      tgMemberInfo: {},
      qdForm: { },
      TicketAbleList: [],
      TicketAbleResult: false,
      activeTicketItem: {},
      verificatInfo: {},
      bykList: [],
      default_pic: require('@/icons/png/default_pic.png'),
      rules: {
        escortId: [
          { required: true, message: '请选择伴游卡', trigger: 'change' }
        ],
        escortMemberId: [
          { required: true, message: '请选择购卡会员', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    getBtkList() {
      this.$set(this.qdForm, 'escortId', '')
      this.$refs.qdForm.clearValidate()
      vendibilityList({
        param: {
          objId: this.activeTicketItem.objId,
          escortObjId: this.activeTicketItem.escortObjId,
          type: this.activeTicketItem.objType
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.bykList = res.recordList
        })
        .catch(() => {})
    },
    open() {
      this.showDialog = true
      this.qdForm = {}
      this.memberId = ''
      this.verificatInfo = {}
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.activeTicketItem = {}
    },
    tgMemberSelect(item) {
      const fn = () => {
        this.tgMemberInfo = item
        this.$set(this.qdForm, 'escortMemberId', item.id)
        this.$refs.qdForm.clearValidate()
      }
      fn()
    },
    tgMemberClear() {
      this.tgMemberInfo = {}
    },
    MemberSelect(item) {
      const that = this
      const fn = () => {
        that.memberId = item.id
        that.verificatInfo = item
        that.getList()
      }
      fn()
    },
    MemberClear() {
      this.verificatInfo = {}
      this.memberId = ''
    },
    closeDialog() {
      this.showDialog = false
      this.qdForm = {}
      this.$emit('close')
    },
    ticketItemClick(item) {
      this.activeTicketItem = { ...item }
      this.getBtkList()
    },
    getList() {
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.activeTicketItem = {}
      mainCardList({ param: { memberId: this.memberId }}).then((resb) => {
        if (resb.errorCode !== '000000') return
        this.TicketAbleResult = true
        this.TicketAbleList = resb.recordList
        // if (resb.recordList.length > 0) {
        //  this.activeTicketItem = resb.recordList[0]
        // }
      })
    },
    qdbtn() {
      let param = {}
      this.$refs.qdForm.validate((valid) => {
        if (valid) {
          this.qdLoading = true
          param = { ...this.qdForm, buyId: this.activeTicketItem.objId }
          escortBuy({ param }).then((resb) => {
            this.qdLoading = false
            if (resb.errorCode !== '000000') return
            this.TicketAbleResult = false
            this.$message.success('购买成功')
            this.showDialog = false
            this.$emit('success', resb.record)
            this.$emit('close')
          }).catch(() => {
            this.qdLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.verificat_info_wrap {
   margin-bottom: 20px;
  .verificat_info-main {
    display: flex;

    .left {
      flex: 1;
      overflow: auto;
      height: 380px;
      margin-right: 20px;

      .info_item {
        cursor: pointer;
        padding: 6px 12px;
        margin-bottom: 10px;
        border-radius: 2px;
        border: 1px solid #dfe2e8;

        h2 {
          padding: 5px 0;
          margin: 0;
          font-size: 16px;
        }

        .line {
          display: flex;
          padding: 5px 0;

          .span6 {
            flex: 5;
          }

          .span4 {
            flex: 5;
          }
        }
      }

      .active {
        border: 1px solid #435ebe;
        background: #f4f7fc;
      }

      .default_noticket {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 160px;
        }
      }
    }

    .right {
      width: 220px;
      height: 380px;
      background-color: #f4f7fc;
      padding: 20px;

      .head_wrap {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .wrap {
          flex: 1;

          .name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
          }

          .phone {
            color: #666666;
          }
        }
      }

      .line {
        margin-top: 20px;

        .key {
          display: inline-block;
          width: 70px;
        }
      }
    }
  }
}

.verificat_footer{
  text-align: left;
  display: flex;
  justify-content: space-between;
  .verificat_num_wrap{
    flex: 1;
  }
}
</style>
